<<template>
    <div class="login-box">
        <div class="login">
            <div class="header">
                <h3>用户您好，请先登录~</h3>
            </div>
            <el-form id="login_form" ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules"
                label-width="auto" :size="formSize" status-icon>
                <el-form-item class="form-group" prop="username">
                    <label>帐号：</label>
                    <el-input type="text" class="form-control" placeholder="请输入账号" v-model="ruleForm.username" />
                </el-form-item>
                <el-form-item class="form-group" prop="password">
                    <label>密码：</label>
                    <el-input class=" form-control" type="password" placeholder="请输入密码" show-password
                        v-model="ruleForm.password" />
                </el-form-item>
                <div class="checkbox">
                    <input type="checkbox" /><label>记住密码</label>
                </div>
                <el-button type="primary" style="margin-top: 10px;width: 50%;" round @click="submitForm(ruleFormRef)">
                    登录<el-icon>
                        <Position />
                    </el-icon>
                </el-button>
            </el-form>
            <div class="message">
                <p>没有账号? <router-link to="/register">立即注册</router-link></p>
            </div>
        </div>
    </div>
</template>

    <script setup lang="ts">
    import store from '@/store/index'
    import { ElMessage } from 'element-plus'
    import { reactive, ref } from 'vue'
    import { userLogin } from '@/api/user'
    import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
    import router from '@/router'

    // 登录对象接口
    interface RuleForm {
        username: string
        password: string
    }

    // 表单对象
    const ruleFormRef = ref<FormInstance>()

    // 规则
    const ruleForm = reactive<RuleForm>({
        username: '',
        password: '',
    })

    // 表单尺寸
    const formSize = ref<ComponentSize>('default')

    // 表单验证规则
    const rules = reactive<FormRules<RuleForm>>({
        username: [
            { required: true, message: '账号不能为空！', trigger: 'blur' },
            { min: 3, max: 15, message: '请输入有效账号！', trigger: 'blur' },
        ],
        password: [
            { required: true, message: '密码不能为空！', trigger: 'blur' },
            { min: 3, message: '密码长度至少大于3字符！', trigger: 'blur' },
        ],
    })

    // 提交表单
    const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl)
            return
        await formEl.validate((valid, fields) => {
            if (valid) {
                userLogin(ruleForm).then(res => {
                    if (res.flag) {
                        ElMessage({
                            message: res.message,
                            type: 'success',
                        })
                        router.push({ path: "/index" })
                        // 在Vuex中存储token
                        store.commit("setToken", res.data);//在 Vuex 中，可以使用 commit 方法来提交一个 mutation，
                        //从而改变 Vuex 中的状态。commit 方法接收两个参数，第一个参数是 mutation 的名称，第二个参数是传递给 mutation 的参数。
                        //res.data 表示登录成功后服务器返回的数据，其中包含了一个名为 token 的属性，它的值就是登录成功后返回的 token 值。
                        store.commit("updateusername", ruleForm.username);
                    } else {
                        ElMessage({
                            message: res.message,
                            type: 'error',
                        })
                    }
                })
            } else {
                console.log('error submit!', fields)
            }
        })
    }


</script>

    <style scoped>

    :deep(.el-form-item__error) {
        top: 110%;
        width: 100%;
        text-align: left;
        padding-left: 50px;
        color: rgb(195, 5, 5);
    }

    .login-box {
        box-sizing: border-box;
        padding-top: 150px;
        background: url("@/assets/img/rice.png");
        background-size: cover;
        width: 100%;
        height: 100%;

        .login {
            width: 340px;
            margin: 0 auto;
            color: #024c85;
            font-weight: bold;

            .header {
                padding-left: 30px;
                height: 28px;
                text-align: center;
            }

            #login_form {
                color: aliceblue;
                line-height: 30px;
                padding: 20px;
                margin-bottom: 15px;
                border-radius: 5px;

                .form-group {
                    display: flex;
                    width: 100%;
                    height: 30px;
                    margin-bottom: 20px;
                    justify-content: center;

                    .form-control {
                        width: 80%;
                    }
                }


                .checkbox {
                    display: flex;
                    height: 30px;
                    line-height: 30px;
                    justify-content: center;
                }
            }

            .message {
                padding: 10px;
                padding-bottom: 0;
                color: white;
                border-radius: 5px;
                text-align: center;
            }
        }
    }
</style>